<template>
    
    <body> 
        
        <div class="login-panel">    
            <n-card id="card" title="用户登录">
                <n-form :rules="rules" :model="admin">    
                    <n-form-item label="账号" path="account">
                        <n-input v-model:value="admin.account" placeholder="请输入账号"/>
                    </n-form-item>
                    <n-form-item label="密码" path="password">
                        <n-input v-model:value="admin.password" type="password" placeholder="请输入账号"/>
                    </n-form-item>       
                </n-form>
            
                <n-button @click="back" type="warning" style=" margin-right: 20px;" >返回</n-button>
                <n-button @click="login" type="success" >登录</n-button>
                <n-button @click="register" type="info" style="margin-left: 20px;">注册</n-button>
                
            </n-card>
            
        </div>
    </body>
</template>



<script setup>

import {ref,reactive,inject} from 'vue'
import {AdminStore} from '../store/User'
import {useRouter,useRoute} from 'vue-router'
const router = useRouter()
const route = useRoute()


const axios = inject("axios")
const adminStore = AdminStore()
const message = inject("message")



//验证规则
let rules = {
    account:[
        {required:true,message:"请输入账号",trigger:"blur"},
        {min:3,max:12,message:"长度在3-12",trigger:"blur"},
    ],
    password:[
        {required:true,message:"请输入密码",trigger:"blur"},
        {min:3,max:18,message:"长度在3-18",trigger:"blur"},
    ]
};

let admin = reactive({
    account:"",
    password:"",
    rember:false
})

const login = async () => {
    
    let result = await axios.post("/admin/login",{
        account:admin.account,
        password:admin.password
    });
    if(result.data.code == 200){
        //记录token
        adminStore.token = result.data.data.token
        adminStore.account = result.data.data.account
        adminStore.id = result.data.data.id


        router.push("/dashboard/article")
        message.success("登录成功")
    }else{
        message.error("登录失败");
    }
    //console.log(result)
}

const back = async () => {
    router.push("/")
}

const register = async () => {
    router.push("/register")
}

</script>



<style lang="scss" scoped>
#card{
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 280px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    background: rgba(50,50,50,0.2);
}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(image/bg.jpg) no-repeat;
    background-size: cover;
}

</style>

